<script setup lang="ts">
import {ref, onUnmounted} from 'vue'
import {logoutApi} from "@/api/userApis.ts";
import {ElMessage, ElMessageBox} from "element-plus";
import {useRouter} from "vue-router";
import useStore from "@/store/index";

const router = useRouter()
const store = useStore()
const nowTime = ref<string>(new Date().toLocaleString())
// 每秒更新时间
let interval = setInterval(() => {
  nowTime.value = new Date().toLocaleString()
}, 1000)

// 组件销毁时清除定时器
onUnmounted(() => {
  clearInterval(interval)
})

const clickLogout = async () => {
  ElMessageBox.confirm('确定要登出吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    let res = await logoutApi().catch((err) => {
      ElMessage.error(err)
    })
    if (res?.data.code == 200) {
      store.account = ''
      ElMessage.success('登出成功')
      await router.replace('/login')
    } else {
      ElMessage.error(res?.data.msg)
    }
  }).catch(() => {
    ElMessage.info('取消登出')
  })

}

</script>

<template>
<header>
  <div @click="clickLogout" class="absolute left-8 hover:cursor-pointer top-1/3 text-cyan-600 hover:text-blue-200 transition-colors duration-500 ">登出</div>
  <h1 class="text-center text-blue-200">东软空气质量环保公众监督平台</h1>
  <div class="show-time text-blue-200 text-sm font-bold">
    <el-icon>
      <Timer/>
    </el-icon>
    {{nowTime}}
  </div>
</header>
</template>

<style scoped>
header {
  position: absolute;
  top: 0;
  width: 100%;
  background: url(@/assets/head_bg.png) no-repeat;
  background-size: 100% 100%;

}
.show-time {
  position: absolute;
  top: 30%;
  right: 1rem;
  font-family: "Microsoft YaHei UI Light",serif;
  /*color: rgba(255, 255, 255, 0.7);*/
}

</style>
